<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Exercise padding</title>
</head>
<style>
    .nav {
        height: 41px;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
        background-color: #fcfcfc;
        line-height: 41px;
        margin-bottom: 20px;
    }

    .nav a {
        display: inline-block;
        height: 41px;
        padding: 0 20px;
        font-size: 12px;
        color: #4c4c4c;
        text-decoration: none;
    }

    .nav a:hover {
        background-color: #eee;
        color: #f7b84f;
    }

    /* 块级盒子水平居中，只要左右设置auto */
    .header {
        width: 900px;
        height: 200px;
        background-color: pink;
        margin: 0 auto;

        text-align: center;
    }

    /*字父盒子塌陷问题*/
    .ho {
        width: 300px;
        height: 250px;
        background-color: #2d8cf0;
        margin-top: 20px;
        /*解决1：给父元素定义上边框*/
        border: 1px solid transparent;
        /*解决2：给父元素定义內边距*/
        padding: 1px;
        /*overflow: hidden*/
        overflow: hidden;
    }

    .hw {
        width: 150px;
        height: 120px;
        background-color: #f7b84f;
        /*子盒子设置top会将父盒子也下移*/
        margin-top: 50px;
    }

    .text-one-hh {
      margin: 10px auto;
      width: 150px;
      height: 60px;
      background-color: #8ce6b0;
      /*文字显示不允许换行*/
      white-space: nowrap;
      /*超出部分隐藏*/
      overflow: hidden;
      /*超出的部分用省略号显示*/
      text-overflow: ellipsis;
    }

    .text-list-hh {
      margin: 10px auto;
      width: 150px;
      height: 45px;
      background-color: #8ce6b0;

      /*超出部分隐藏*/
      overflow: hidden;
      /*超出的部分用省略号显示*/
      text-overflow: ellipsis;
      /* 存在兼容性问题，需要严格控制大小 */
      display: -webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient: vertical;
    }
</style>
<body>
<!--  面对文本内容不一样，只设置行内边距，让其自动设置块宽度-->
<div class="nav">
  <a href="#">新浪导航</a>
  <a href="#">手机新浪</a>
  <a href="#">移动客户端</a>
  <a href="#">微博</a>
  <a href="#">客户端</a>
</div>

<div class="header">
  <span>里面的文字也居中 test-align:center</span>
</div>

<div class="ho">
  <div class="hw"></div>
</div>

<div class="text-one-hh">
  为什么都说童年是无忧无虑最快乐的？但是童年的时候你自己却只感到作业太多想快点长大
</div>

<div class="text-list-hh">
  为什么都说童年是无忧无虑最快乐的？但是童年的时候你自己却只感到作业太多想快点长大
</div>



</body>
</html>